<template>
    <div>

        <div class="container"
             :style='{"minHeight":"100vh","alignItems":"center","background":"url(http://codegen.caihongy.cn/20221123/41243b070df2408aa2d042419117b15f.jpg) no-repeat","display":"flex","width":"100%","backgroundSize":"100% 100%","backgroundPosition":"center center","backgroundRepeat":"no-repeat","justifyContent":"center"}'>
            <el-form class='rgs-form' v-if="pageFlag=='security1'"
                     :style='{"padding":"40px 40px 40px 500px","boxShadow":"12px 12px 0px #9cd8da,inset 0px 0px 0px 0px #e0f8e8","margin":"40px 0 40px 0","borderColor":"#00adb5  #00adb5 #00adb5 #00adb5","borderRadius":"0 0 20% 20%","background":"rgba(255,255,255,.2)","borderWidth":"4px","width":"1000px","minWidth":"800px","borderStyle":"solid double solid double","height":"auto"}'
                     ref="registerForm" :model="registerForm" :rules="rules">
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 20px 0","fontSize":"20px","color":"#333","textAlign":"center","fontWeight":"bold"}'>
                    找回密码</p></div>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              prop="username">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        账号：
                    </div>
                    <el-input v-model="registerForm.username" placeholder="请您输入账号"/>
                </el-form-item>
                <el-button
                        :style='{"border":"0","cursor":"pointer","padding":"0px","boxShadow":"0px 2px 6px #9cdde0","margin":"12px 16px 10px 45px","color":"#fff","display":"inline-block","outline":"none","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","fontSize":"16px","height":"40px"}'
                        type="primary" @click="getSecurity('registerForm')">下一步
                </el-button>
                <router-link
                        :style='{"cursor":"pointer","padding":"0 10%","color":"#333","display":"inline-block","width":"100%","lineHeight":"1","fontSize":"12px","textDecoration":"none"}'
                        to="/login">已有账户登录
                </router-link>
            </el-form>

            <el-form class='rgs-form' v-if="pageFlag=='security2'"
                     :style='{"padding":"40px 40px 40px 500px","boxShadow":"12px 12px 0px #9cd8da,inset 0px 0px 0px 0px #e0f8e8","margin":"40px 0 40px 0","borderColor":"#00adb5  #00adb5 #00adb5 #00adb5","borderRadius":"0 0 20% 20%","background":"rgba(255,255,255,.2)","borderWidth":"4px","width":"1000px","minWidth":"800px","borderStyle":"solid double solid double","height":"auto"}'
                     ref="registerForm" :model="registerForm" :rules="rules">
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 20px 0","fontSize":"20px","color":"#333","textAlign":"center","fontWeight":"bold"}'>
                    找回密码</p></div>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              prop="pquestion">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        密保问题：
                    </div>
                    <el-input readonly v-model="registerForm.pquestion" placeholder="密保问题"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              prop="myanswer">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        密保答案：
                    </div>
                    <el-input v-model="registerForm.myanswer" placeholder="请您输入密保答案"/>
                </el-form-item>
                <el-button
                        :style='{"border":"0","cursor":"pointer","padding":"0px","boxShadow":"0px 2px 6px #9cdde0","margin":"12px 16px 10px 45px","color":"#fff","display":"inline-block","outline":"none","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","fontSize":"16px","height":"40px"}'
                        type="primary" @click="validateSecurity('registerForm')">下一步
                </el-button>
                <router-link
                        :style='{"cursor":"pointer","padding":"0 10%","color":"#333","display":"inline-block","width":"100%","lineHeight":"1","fontSize":"12px","textDecoration":"none"}'
                        to="/login">已有账户登录
                </router-link>
            </el-form>

            <el-form class='rgs-form' v-if="pageFlag=='security3'"
                     :style='{"padding":"40px 40px 40px 500px","boxShadow":"12px 12px 0px #9cd8da,inset 0px 0px 0px 0px #e0f8e8","margin":"40px 0 40px 0","borderColor":"#00adb5  #00adb5 #00adb5 #00adb5","borderRadius":"0 0 20% 20%","background":"rgba(255,255,255,.2)","borderWidth":"4px","width":"1000px","minWidth":"800px","borderStyle":"solid double solid double","height":"auto"}'
                     ref="registerForm" :model="registerForm" :rules="rules">
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 20px 0","fontSize":"20px","color":"#333","textAlign":"center","fontWeight":"bold"}'>
                    找回密码</p></div>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              prop="newpassword">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        新密码：
                    </div>
                    <el-input v-model="registerForm.newpassword" type="password" placeholder="请您输入新密码"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              prop="repassword">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        确认密码：
                    </div>
                    <el-input v-model="registerForm.repassword" type="password" placeholder="请您确认密码"/>
                </el-form-item>
                <el-button
                        :style='{"border":"0","cursor":"pointer","padding":"0px","boxShadow":"0px 2px 6px #9cdde0","margin":"12px 16px 10px 45px","color":"#fff","display":"inline-block","outline":"none","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","fontSize":"16px","height":"40px"}'
                        type="primary" @click="updatePassword('registerForm')">修改密码
                </el-button>
                <router-link
                        :style='{"cursor":"pointer","padding":"0 10%","color":"#333","display":"inline-block","width":"100%","lineHeight":"1","fontSize":"12px","textDecoration":"none"}'
                        to="/login">已有账户登录
                </router-link>
            </el-form>
            <el-form class='rgs-form' v-if="pageFlag=='register'"
                     :style='{"padding":"40px 40px 40px 500px","boxShadow":"12px 12px 0px #9cd8da,inset 0px 0px 0px 0px #e0f8e8","margin":"40px 0 40px 0","borderColor":"#00adb5  #00adb5 #00adb5 #00adb5","borderRadius":"0 0 20% 20%","background":"rgba(255,255,255,.2)","borderWidth":"4px","width":"1000px","minWidth":"800px","borderStyle":"solid double solid double","height":"auto"}'
                     ref="registerForm" :model="registerForm" :rules="rules">
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 4px 0","fontSize":"20px","color":"#333","textAlign":"center","fontWeight":"bold"}'>
                    USER / REGISTER
                </div>
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 20px 0","fontSize":"20px","color":"#333","textAlign":"center","fontWeight":"bold"}'>
                    基于Java的漯河市旅游业信息管理平台注册</p></div>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="account">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        账号：
                    </div>
                    <el-input v-model="registerForm.account" placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="password">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        密码：
                    </div>
                    <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="password">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        确认密码：
                    </div>
                    <el-input v-model="registerForm.password2" type="password" placeholder="请再次输入密码"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="name">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        姓名：
                    </div>
                    <el-input v-model="registerForm.name" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="gender">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        性别：
                    </div>
                    <el-select v-model="registerForm.gender" placeholder="请选择性别">
                        <el-option
                                v-for="(item,index) in usergenderOptions"
                                :key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="age">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        年龄：
                    </div>
                    <el-input v-model="registerForm.age" placeholder="请输入年龄"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="mobilephonenumber">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        手机号码：
                    </div>
                    <el-input v-model="registerForm.mobilephonenumber" placeholder="请输入手机号码"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="portrait">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        头像：
                    </div>
                    <file-upload
                            tip="点击上传头像"
                            action="file/upload"
                            :limit="1"
                            :multiple="true"
                            :fileUrls="registerForm.portrait?registerForm.portrait:''"
                            @change="userportraitUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="pquestion">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        密保问题：
                    </div>
                    <el-input v-model="registerForm.pquestion" placeholder="请输入密保问题"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0px auto 24px","height":"auto"}'
                              v-if="tableName=='user'" prop="panswer">
                    <div v-if="false"
                         :style='{"width":"64px","lineHeight":"44px","fontSize":"14px","color":"rgba(64, 158, 255, 1)"}'>
                        密保答案：
                    </div>
                    <el-input v-model="registerForm.panswer" placeholder="请输入密保答案"/>
                </el-form-item>
                <el-button
                        :style='{"border":"0","cursor":"pointer","padding":"0px","boxShadow":"0px 2px 6px #9cdde0","margin":"12px 16px 10px 45px","color":"#fff","display":"inline-block","outline":"none","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","fontSize":"16px","height":"40px"}'
                        type="primary" @click="submitForm('registerForm')">注册
                </el-button>
                <el-button
                        :style='{"border":"1px solid #bbb","cursor":"pointer","padding":"0px","boxShadow":"1px 2px 3px #ccc","margin":"12px auto 5px","color":"#999","display":"inline-block","outline":"none","borderRadius":"20px","background":"#fff","width":"128px","fontSize":"16px","height":"40px"}'
                        @click="resetForm('registerForm')">重置
                </el-button>
                <router-link
                        :style='{"cursor":"pointer","padding":"0 10%","color":"#333","display":"inline-block","width":"100%","lineHeight":"1","fontSize":"12px","textDecoration":"none"}'
                        to="/login">已有账户登录
                </router-link>
            </el-form>
        </div>
    </div>
    </div>
</template>

<script>

    export default {
        //数据集合
        data() {
            return {
                pageFlag: '',
                tableName: '',
                registerForm: {
                    gender: '',
                },
                rules: {},
                usergenderOptions: [],
            }
        },
        mounted() {
        },
        created() {
            this.pageFlag = this.$route.query.pageFlag;
            this.tableName = this.$route.query.role;
            if ('user' == this.tableName) {
                this.rules.account = [{required: true, message: '请输入账号', trigger: 'blur'}];
            }
            if ('user' == this.tableName) {
                this.rules.password = [{required: true, message: '请输入密码', trigger: 'blur'}];
            }
            if ('user' == this.tableName) {
                this.rules.name = [{required: true, message: '请输入姓名', trigger: 'blur'}];
            }
            this.usergenderOptions = "男,女".split(',');
            if ('user' == this.tableName) {
                this.rules.age = [{required: true, validator: this.$validate.isIntNumer, trigger: 'blur'}];
            }
            if ('user' == this.tableName) {
                this.rules.mobilephonenumber = [{required: true, validator: this.$validate.isMobile, trigger: 'blur'}];
            }
        },
        //方法集合
        methods: {
            // 获取uuid
            getUUID() {
                return new Date().getTime();
            },
            // 下二随
            userportraitUploadChange(fileUrls) {
                this.registerForm.portrait = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
            },

            // 多级联动参数


//获取密保问题
            getSecurity() {
                this.tableName = 'user'
                if (!this.tableName) {
                    this.$message.error("请选择角色");
                    return false
                }
                if (!this.registerForm.username) {
                    this.$message.error("请输入账号");
                    return false
                }
                this.$http({
                    url: this.tableName + `/security?username=` + this.registerForm.username,
                    method: "get",
                }).then(({
                             data
                         }) => {
                    if (data.data && data.code === 0) {
                        this.registerForm = data.data;
                        this.pageFlag = "security2"
                    } else {
                        if (!data.data) {
                            this.$message.error("用户不存在");
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                });
            },
            //验证密保问题
            validateSecurity() {
                let that = this
                if (this.registerForm.panswer != this.registerForm.myanswer) {
                    this.$message.error("答案输入不正确");
                    return false
                }
                this.$message.success("答案正确");
                setTimeout(() => {
                    this.pageFlag = "security3";
                }, 1000)

            },
            // 修改密码
            updatePassword() {
                if (!this.registerForm.newpassword) {
                    this.$message.error("请输入新密码");
                    return;
                }
                if (this.registerForm.newpassword != this.registerForm.repassword) {
                    this.$message.error("两次密码输入不一致");
                    return;
                }
                this.registerForm.mima = this.registerForm.newpassword;
                this.registerForm.password = this.registerForm.newpassword;
                this.$http.post(this.tableName + `/update`, this.registerForm).then(res => {
                    if (res.data.code === 0) {
                        this.$message({
                            message: "密码修改成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                this.$router.push('/login');
                            }
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = this.tableName + "/register";
                        if (`user` == this.tableName && this.registerForm.password != this.registerForm.password2) {
                            this.$message.error(`两次密码输入不一致`);
                            return
                        }
                        this.$http.post(url, this.registerForm).then(res => {
                            if (res.data.code === 0) {
                                this.$message({
                                    message: '注册成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.$router.push('/login');
                                    }
                                });
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .container {
        position: relative;
        background: url(http://codegen.caihongy.cn/20221123/41243b070df2408aa2d042419117b15f.jpg) no-repeat;

        .el-date-editor.el-input {
            width: 100%;
        }

        .rgs-form .el-input /deep/ .el-input__inner {
            border: 0px solid #9cc1d7;
            border-radius: 20px;
            padding: 0 10px;
            box-shadow: 0px 2px 0px #a0d8db;
            outline: none;
            color: #999;
            background: #fff;
            width: 100%;
            font-size: 14px;
            height: 40px;
        }

        .rgs-form .el-select /deep/ .el-input__inner {
            border: 0px solid #eacb96;
            border-radius: 20px;
            padding: 0 10px;
            box-shadow: 0px 2px 0px #a0d8db;
            outline: none;
            color: #999;
            background: #fff;
            width: 288px;
            font-size: 14px;
            height: 40px;
        }

        .rgs-form .el-date-editor /deep/ .el-input__inner {
            border: 0px solid #eacb96;
            border-radius: 20px;
            padding: 0 10px 0 30px;
            box-shadow: 0px 2px 0px #a0d8db;
            outline: none;
            color: #999;
            background: #fff;
            width: 288px;
            font-size: 14px;
            height: 40px;
        }

        .rgs-form .el-date-editor /deep/ .el-input__inner {
            border: 0px solid #eacb96;
            border-radius: 20px;
            padding: 0 10px 0 30px;
            box-shadow: 0px 2px 0px #a0d8db;
            outline: none;
            color: #999;
            background: #fff;
            width: 288px;
            font-size: 14px;
            height: 40px;
        }

        .rgs-form /deep/ .el-upload--picture-card {
            background: transparent;
            border: 0;
            border-radius: 0;
            width: auto;
            height: auto;
            line-height: initial;
            vertical-align: middle;
        }

        .rgs-form /deep/ .upload .upload-img {
            border: 1px dotted #00adb5;
            cursor: pointer;
            border-radius: 8px;
            color: #00adb5;
            background: #Fff;
            width: 160px;
            font-size: 32px;
            line-height: 120px;
            text-align: center;
            height: 120px;
        }

        .rgs-form /deep/ .el-upload-list .el-upload-list__item {
            border: 1px dotted #00adb5;
            cursor: pointer;
            border-radius: 8px;
            color: #00adb5;
            background: #Fff;
            width: 160px;
            font-size: 32px;
            line-height: 120px;
            text-align: center;
            height: 120px;
        }

        .rgs-form /deep/ .el-upload .el-icon-plus {
            border: 1px dotted #00adb5;
            cursor: pointer;
            border-radius: 8px;
            color: #00adb5;
            background: #Fff;
            width: 160px;
            font-size: 32px;
            line-height: 120px;
            text-align: center;
            height: 120px;
        }
    }
</style>
